<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1
			{
				width: 100%;
				height: 20px;
				border-bottom: 1px solid gainsboro;
			}
			#div2
			{
				width: 100%;
				height: 150px;
				text-align: center;
				
			}
			#div3
			{
				width: 100%;
				height: 90px;
				text-align: center;
			}
			#div4
			{
				margin: auto;
				width: 750px;
				height: 35px;
				border: 1px solid gainsboro;
				
			}
			#div5
			{
				width: 750px;
				margin: auto;
				height: 700px;
				border: 1px solid gainsboro;
				border-top: white;
			}
			#div6
			{
				width: 500px;
				height: 600px;
				float: left;
				/*border: 1px solid black;*/
			}
			#div7
			{
				width: 246px;
				height: 600px;
				float: left;
				/*border: 1px solid black;*/
			}
			#div8
			{
				width: 470px;
				height: 20px;
				margin-left: 28px;
				border-bottom: 1px solid gainsboro;
			}
			#div9
			{
				width: 470px;
				height: 230px;
				margin-left: 28px;
				border-bottom: 1px solid gainsboro;
			}
			#div10
			{
				width: 470px;
				height: 230px;
				margin-left: 28px;
				border-bottom: 1px solid gainsboro;
			}
			.div10
			{
				width: 110px;
				height: 270px;
				margin-top: 12px;
				/*border: 1px solid black;*/
				margin-left: 10px;
				float: left;
			}
			
			ul
		    {
		    	list-style: none;
		    	margin-top: 0px;
		    	padding-left: 0px;
		    	
		    }
			.li1
			{
				float: left;
				font-size: 13px;
				line-height: 20px;
			    margin-left: 15px;
			}
			.li2
			{
				float: right;
				font-size: 13px;
				line-height: 20px;
			    margin-right: 15px;
			   
			}
			.li3
			{
				float: left;
				font-size: 14px;
				margin-left: 15px;
				line-height: 35px;
				
				
			}
			li:hover
			{
				color:blue;
				cursor:pointer;
				background-color: gainsboro;
			}
        	[type=text]		
        	{
        		width: 510px;
        		height: 30px;
        		
        	}
        	[value=百度一下]
        	{
        		width: 80px;
        		height: 36px;
        		padding-left: 0px;
        		
        	}
        	#p1
        	{
        		
        		padding-left: 100px;
        		color: gray;
        		font-size: 11px;
        		margin-top: 5px;
        	}
        	h1
        	{
        		font-size: 18px;
        	}
        	.p2
        	{
        		margin-top: 0px;
        		font-size: 11px;
        		color: gray;
        	}
        	a
        	{
        		color: black;
        		text-decoration: none;
        	}
        	a:hover h1
        	{
        		color: blue;
        	}
        	.li4
        	{
        		font-size: 13px;
        		margin-top: 10px;
        	}
        	.li5
        	{
        		font-size: 13px;
        		margin-top: 10px;
        	}
        	#id1:hover
        	{
        		background-color: white;
        	}
        	#li5
        	{
        		font-size: 14px;
        		font-weight: 800;
        		text-align: left;
        		
        	}
        	#li6
        	{
        		font-size: 14px;
        		font-weight: 800;
        		text-align: right;
        	}
        	#div11
        	{
        		width: 70px;
        		height: 180px;
        		border: 1px solid gainsboro;
        		display: none;
        		position: absolute;
        	}
        	#id1:hover #div11
        	{
        		display: block;
        	}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul >
				<li class="li1">天津：29度</li>
				<li class="li1">换肤</li>
				<li class="li1">消息</li>
				<li class="li2" id="id1">更多产品
				<div id="div11">
                   	<ul>
                   		<li class="li5">糯米网</li>
                   		<li class="li5">美团网</li>
                   		<li class="li5">滴滴出行</li>
                   		<li class="li5">图片</li>
                   	</ul>
                   	</div>
				</li>
				<li class="li2">hao123</li>
				<li class="li2">地图</li>
				<li class="li2">视频</li>
				<li class="li2">贴吧</li>
				<li class="li2">学术</li>
				<li class="li2">设置</li>
				
			</ul>
			
		</div>
		<div id="div2">
			<img src="img/a.png" width="270px "height="80px" style="margin-top: 65px;" />
		</div>
		<div id="div3">
			<input type="text" />
			<input type="submit"  value="百度一下"/>
			
		</div>
		<div id="div4">
			<ul>
				<li class="li3">我的关注</li>
				<li class="li3">推荐</li>
				<li class="li3">导航</li>
				
			</ul>
		</div>
		<div id="div5">
			<div id="div6">
				<div id="div8"><p id="p1">以下消息根据您的兴趣提供</p></div>
				<div id="div9">
					<a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_7814383705457038335%22%7D&n_type=0&p_from=1"><h1>屌丝于学忠变形记</h1></a>
					<a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_7814383705457038335%22%7D&n_type=0&p_from=1"><img src="img/82591819440720406.jpg" width="460px" height="165px" /></a>
					
					<p class="p2">新浪专栏   07-02 10：01</p>
				</div>
				<div id="div10">
					<a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_15875792260919265489%22%7D&n_type=0&p_from=1"><h1>男子在小区内连捅四人致两人受伤两人死亡</h1></a>
					<a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_15875792260919265489%22%7D&n_type=0&p_from=1"><img src="img/cc.png" width="460px" height="165px" /></a>
					
					<p class="p2">凤凰专栏   07-02 06：39</p>
				</div>
			</div>
			<div id="div7">
				<div class="div10">
					<ul>
						<li id="li5">实时热点</li>
						<li class="li4">冯提莫回应会计门</li>
						<li class="li4">边叫穷边装修豪宅</li>
						<li class="li4">一夜扑出8个点球</li>
						<li class="li4">陈坤回应卖惨</li>
						<li class="li4">13年后跨国认亲</li>
						<li class="li4">驴友太白山野泳</li>
						<li class="li4">科比欢迎詹姆斯</li>
						<li class="li4">华为回应搬迁东莞</li>
					</ul>
					
				</div>
				<div class="div10">
					<ul>
						<li id="li6">换一批</li>
						<li class="li4">苹果新设备</li>
						<li class="li4">2万斤西瓜被砍烂</li>
						<li class="li4">柯震东遭抵制</li>
						<li class="li4">矿泉水致车内起火</li>
						<li class="li4">加拿大歌手被枪杀</li>
						<li class="li4">史蒂芬森签约湖人</li>
						<li class="li4">郭富城回乡摆喜宴</li>
						<li class="li4">公积金新变化</li>
					</ul>
				</div>
				<img src="img/d.png" width="220px"height="120px" />
			</div>
		</div>
	</body>
</html>

